<template>
	<view class="lawyerHome">
		<navbar myprops="尹文娟律师-九一律师咨询"></navbar>
		<view class="lawyerHome-top">
			<view class="lawyerHome-top-left">
				<van-icon name="arrow-left" size="44rpx" color="white" @click="left" />
			</view>
		</view>
		<view class="lawyerHome-content" v-for="item in list" :key="item.id">
			<view class="lawyerHome-content-top">
				<image :src="item.image" mode=""></image>
				<view class="lawyerHome-content-top-view">
					<view class="lawyerHome-content-top-view-vw">
						<view>{{item.answerCount}}<text>次</text></view>
						<text>解答</text>
					</view>
					<view class="lawyerHome-content-top-view-vw">
						<view>{{item.rate}}<text></text></view>
						<text>好评率</text>
					</view>
					<view class="lawyerHome-content-top-view-vw">
						<view>{{item.loveCount}}<text>次</text></view>
						<text>感谢</text>
					</view>
					<view class="lawyerHome-content-top-view-vw">
						<view>{{item.follow}}<text>个</text></view>
						<text>粉丝</text>
					</view>
				</view>
			</view>
			<view class="lawyerHome-content-text">
				<view class="lawyerHome-content-text-top">
					<text class="text1">{{item.name}}</text>
					<text class="text2">律师</text>
					<text class="text3">执业{{item.num}}年</text>
				</view>
				<view class="lawyerHome-content-text-center">
					<text>活跃程度：{{item.active}}</text>
					<view class="gaunzhu" v-if="!item.is_follow" @click="guanzhu(item)">关注</view>
				</view>
				<view class="lawyerHome-content-text-bottom">
					<text>{{item.name}}{{item.province}} {{item.city}}{{item.area}}律师擅长 {{item.type_id}}，这位律师比较神秘，暂无介绍内容。</text>
					<text class="text4" @click="onOpen(item)"> 更多信息></text>
				</view>
			</view>
			<view class="lawyerHome-content-divider" v-if="item.is_vip">
				<tui-divider width="90%" height="30">{{item.name}}可以提供的法律服务</tui-divider>
			</view>
			<view class="lawyerHome-content-bottom" v-if="item.is_vip">
				<view class="lawyerHome-content-bottom-vw">
					<view class="lawyerHome-content-bottom-vw-view">
						<view class="image-view">
							<image src="../../../static/黑私问.png" mode=""></image>
						</view>
						<text class="text5">私问</text>
						<text class="text6">0次</text>
					</view>
					<view class="lawyerHome-content-bottom-vw-view">
						<view class="image-view">
							<image src="../../../static/黑考试.png" mode=""></image>
						</view>
						<text class="text5">文书代写</text>
						<text class="text6">0次</text>
					</view>
					<view class="lawyerHome-content-bottom-vw-view">
						<view class="image-view">
							<image src="../../../static/洗钱审查@1x.png" mode=""></image>
						</view>
						<text class="text5">合同审查</text>
						<text class="text6">0次</text>
					</view>
					<view class="lawyerHome-content-bottom-vw-view">
						<view class="image-view">
							<image src="../../../static/黑电话.png" mode=""></image>
						</view>
						<text class="text5">计时电话</text>
						<text class="text6">0次</text>
					</view>
					<view class="lawyerHome-content-bottom-vw-view">
						<view class="image-view">
							<image src="../../../static/黑见面.png" mode=""></image>
						</view>
						<text class="text5">法律顾问</text>
						<text class="text6">0次</text>
					</view>
					<view class="lawyerHome-content-bottom-vw-view">
						<view class="image-view">
							<image src="../../../static/黑制度.png" mode=""></image>
						</view>
						<text class="text5">律师函</text>
						<text class="text6">0次</text>
					</view>
					<view class="lawyerHome-content-bottom-vw-view">
						<view class="image-view">
							<image src="../../../static/黑户籍.png" mode=""></image>
						</view>
						<text class="text5">户籍调查</text>
						<text class="text6">0次</text>
					</view>
					<view class="lawyerHome-content-bottom-vw-view">
						<view class="image-view">
							<image src="../../../static/黑民事起诉.png" mode=""></image>
						</view>
						<text class="text5">民事起诉状</text>
						<text class="text6">0次</text>
					</view>
					<view class="lawyerHome-content-bottom-vw-view">
						<view class="image-view">
							<image src="../../../static/黑离婚.png" mode=""></image>
						</view>
						<text class="text5">离婚咨询</text>
						<text class="text6">0次</text>
					</view>
					<view class="lawyerHome-content-bottom-vw-view">
						<view class="image-view">
							<image src="../../../static/黑仲裁.png" mode=""></image>
						</view>
						<text class="text5">劳动仲裁委托</text>
						<text class="text6">0次</text>
					</view>
					<view class="lawyerHome-content-bottom-vw-view">
						<view class="image-view">
							<image src="../../../static/黑事务.png" mode=""></image>
						</view>
						<text class="text5">委托律师</text>
						<text class="text6">0次</text>
					</view>
					<view class="lawyerHome-content-bottom-vw-view">
						<view class="image-view">
							<image src="../../../static/黑工伤.png" mode=""></image>
						</view>
						<text class="text5">工伤赔偿</text>
						<text class="text6">0次</text>
					</view>
					<view class="lawyerHome-content-bottom-vw-view">
						<view class="image-view">
							<image src="../../../static/数据分析@1x.png" mode=""></image>
						</view>
						<text class="text5">合伙协议</text>
						<text class="text6">0次</text>
					</view>
				</view>
			</view>
		</view>
		<van-cell-group>
		  <van-cell title="专业问答" value="更多" is-link @click="zywd" />
		</van-cell-group>
		<view class="Inv1">
			<view class="Inv1-vw" v-for="item in question" :key="item.id">
				<view class="Inv1-vw-top">
					<!-- <image src="../../../static/交.png" mode=""></image> -->
					<view class="bj">
						<text>{{item.type_fastname}}</text>
					</view>
					<text class="text3">{{item.title}}</text>
				</view>
				<text class="text4">到机关、国有企事业单位就业或定向招生就业的，档案转递至就业单位或定向单位。到非公单位55555555555555</text>
				<view class="Inv1-view">
					<view class="" style="margin-right: 74rpx;"><image src="../../../static/眼睛@1x.png" style="width: 24rpx; height: 24rpx;"></image>{{item.visit}}</view>
					<view class=""><image src="../../../static/点赞@1x.png" style="width: 24rpx; height: 24rpx;"></image>{{item.like}}</view>
				</view>
			</view>
		</view>
		<van-popup
		  :show="show"
		  round
			closeable
		  position="bottom"
		  custom-style="height: 38%; background: #EDEDED;"
		  @close="onClose">
			<text class="props-text">律师详细信息</text>
			<view class="popup-view">
				<view class="popup-view-vw">律师姓名：<view>尹文娟</view></view>
				<view class="popup-view-vw">所在地区：<view>江西 赣州 上犹县</view></view>
				<view class="popup-view-vw">执业证号：<view>13607202111333354</view></view>
				<view class="popup-view-vw bbb">
					<text>擅长领域：</text>
					<view class="aaa">合同纠纷,工伤赔偿,交通事故,劳动纠纷,民间借贷,婚姻家庭</view>
				</view>
				<view class="popup-view-vw">最新上线时间：<view>1分钟内</view></view>
				<view class="popup-view-vw">最新解答时间：<view>04-23 08:02</view></view>
				<text>简介：这位律师比较神秘，暂无介绍内容。</text>
			</view>
		</van-popup>
	</view>
	<van-toast id="van-toast" />
</template>

<script>
	import Toast from '@vant/weapp/dist/toast/toast';
	import tuiDivider from "@/components/thorui/tui-divider/tui-divider.vue"
	import { lawyerDetail, followlawyer } from "../../../utils/utils";
	export default {
		components:{
				tuiDivider
		},
		data() {
			return {
				show: false, // 弹出层状态
				list: [], // 个人信息初始数组
				question: [], // 专业问答初始数组
				id: '', // 律师id
			}
		},
		onLoad(option) {
			// console.log(option);
			this.id = option.id
			let a = {
				id: option.id
			}
			lawyerDetail(a, (res) => {
				console.log('律师详情', res.data);
				this.list.push(res.data.lawyer)
				this.question = res.data.questions
			})
			
		},
		methods: {
			// 打开模态框
			onOpen(i) {
				this.show = true
				console.log(i);
			},
			// 关闭模态框
			onClose() {
				this.show = false
			},
			// 返回按钮逻辑
			left () {
				uni.navigateBack(-1)
			},
			// 跳转到专业问答
			zywd () {
				uni.navigateTo({
					url: "/pages/Attorney side/zywdPage/zywdPage"
				})
			},
			// 关注按钮逻辑
			guanzhu (i) {
				let that = this
				console.log(i);
				let arr = {
					lawyer_id : i.id
				}
				followlawyer(arr, (res) => {
					if (res.status == 200) {
						Toast(res.msg)
						let a = {
							id: that.id
						}
						lawyerDetail(a, (e) => {
							console.log(e);
							that.list.splice(0,1, e.data.lawyer)
						})
					} 
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lawyerHome {
		background-color: #EDEDED;
		padding-bottom: var(--safe-area-inset-bottom);
		height: 100vh;
	}
	.lawyerHome-top {
		width: 100vw;
		height: 20vh;
		background-color: #2B2D3C;
		position: relative;
	}
	.lawyerHome-top-left {
		position: absolute;
		left: 30rpx;
		top: 20rpx;
	}
	
	.lawyerHome-content {
		width: 100vw;
		background-color: white;
		border-radius: 16rpx 16rpx 0 0;
		position: relative;
		left: 0;
		top: -10rpx;
		padding-bottom: 20rpx;
	}
	
	.lawyerHome-content-top {
		height: 140rpx;
		display: flex;
		align-items: center;
	}
	.lawyerHome-content-top > image {
		width: 160rpx;
		height: 160rpx;
		position: relative;
		left: 10rpx;
		top: -20rpx;
	}
	.lawyerHome-content-top-view {
		width: 65vw;
		height: 140rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.lawyerHome-content-top-view > .lawyerHome-content-top-view-vw {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.lawyerHome-content-top-view-vw > view {
		font-weight: bold;
		font-size: 28rpx;
	}
	.lawyerHome-content-top-view-vw > view > text {
		font-weight: normal;
		font-size: 24rpx;
	}
	.lawyerHome-content-top-view-vw > text {
		color: #9a9a9a;
		font-size: 26rpx;
	}
	
	.lawyerHome-content-text {
		width: 95vw;
		height: 200rpx;
		margin: 0 auto;
	}
	.lawyerHome-content-text-top {
		display: flex;
		align-items: center;
	}
	.lawyerHome-content-text-top > .text1 {
		font-weight: bold;
		font-size: 32rpx;
	}
	.lawyerHome-content-text-top > .text2 {
		margin-left: 10rpx;
		font-size: 28rpx;
	}
	.lawyerHome-content-text-top > .text3 {
		font-size: 20rpx;
		font-weight: bold;
		margin-left: 20rpx;
	}
	.lawyerHome-content-text-center {
		font-size: 24rpx;
		margin-top: 4rpx;
		position: relative;
	}
	.lawyerHome-content-text-center > .gaunzhu {
		width: 110rpx;
		height: 52rpx;
		background-color: #0070af;
		border-radius: 12px;
		position: absolute;
		right: 0;
		top: -40rpx;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
	}
	.lawyerHome-content-text-bottom {
		font-size: 28rpx;
		margin-top: 6rpx;
	}
	.lawyerHome-content-text-bottom > .text4 {
		color: #656a7d;
	}
	
	.lawyerHome-content-divider {
		margin-top: 20rpx;
	}
	
	.lawyerHome-content-bottom {
		width: 100vw;
		height: 170rpx;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.lawyerHome-content-bottom-vw {
		width: 100%;
		height: 150rpx;
		font-size: 20rpx;
		overflow-x: auto;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}
	.lawyerHome-content-bottom-vw-view {
		width: 100rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		margin-left: 18px;
	}
	
	.lawyerHome-content-bottom-vw :nth-child(8) > .text5 {
		width: 100rpx;
	}
	.lawyerHome-content-bottom-vw :nth-child(10) > .text5 {
		width: 120rpx;
	}
	
	.image-view {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #ebedf0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.image-view > image {
		width: 48rpx;
		height: 48rpx;
	}
	.lawyerHome-content-bottom-vw-view > .text5 {
		color: #383838;
	}
	.lawyerHome-content-bottom-vw-view > .text6 {
		color: #A9A9A9;
	}
	
	.Inv1 {
		width: 100vw;
		background-color: white;
		overflow: hidden;
	}
	.Inv1-vw {
		width: 694rpx;
		height: 202rpx;
		margin: 10px 0 0 20px;
	}
	.Inv1-vw-top {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.Inv1-vw-top > .text3 {
		font-size: 28rpx;
		font-weight: bold;
		color: #383838;
		margin-left: 10rpx;
	}
	.Inv1-vw-top > .bj {
		width: 40rpx;
		height: 32rpx;
		background-color: #036faf;
		border-radius: 6px 6px 6px 3px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		color: white;
	}
	.Inv1-vw > .text4 {
		width: 694rpx;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 32rpx;
		color: #4D4D4D;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;  
		overflow: hidden;
	}
	.Inv1-view {
		display: flex;
		margin-top: 30rpx;
		color: #A6A6A6;
		align-items: center;
	}
	
	.props-text {
		display: block;
		text-align: center;
		font-size: 14px;
		margin-top: 30px;
	}
	.popup-view {
		background-color: white;
		width: 92vw;
		height: 25vh;
		margin: 10px auto 0;
		border-radius: 12px;
		font-size: 14px;
	}
	.popup-view-vw {
		display: flex;
		margin: 7px 0 0 15px;
	}
	.popup-view-vw > view {
		font-weight: bold;
	}
	.bbb {
		display: flex;
		align-items: center;
	}
	.bbb > text {
		display: block;
		width: 26vw;
	}
	
	.popup-view > text {
		display: block;
		margin: 5px 0 0 15px;
		font-weight: bold;
	}
	
</style>
